<template
  ><div style="padding: 10px">
    <n-card :title="props.title">
      <n-form
        style="width: 80%; margin-top: 24px"
        label-placement="left"
        label-width="100px"
        :model="formValue"
        ref="formRef"
        :rules="formRles"
      >
        <n-form-item label="工作模式">
          <n-select v-model:value="formValue.uartMode" :options="uartModeOptions" />
        </n-form-item>
        <n-form-item label="波特率"
          ><n-select v-model:value="formValue.uartBaudrate" :options="uartBaudrateOptions"
        /></n-form-item>
        <n-form-item v-if="isOpenSbus" label="Sbus">
          <n-select v-model:value="formValue.uartSbus" :options="uartSbusOptions" />
        </n-form-item>
        <n-form-item
          v-if="formValue.uartMode === 1 && formValue.uartSbus === 1"
          label="Sbus数据帧间隔"
        >
          <n-select v-model:value="formValue.uartSbusInterval" :options="uartSbusIntervalOptions" />
        </n-form-item>
        <n-form-item v-if="isUartIp" label="对端IP" path="uartIp"
          ><n-input v-model:value="formValue.uartIp"
        /></n-form-item>
        <n-form-item v-if="isOpenDualOpenControl" label="端口一致"
          ><n-select v-model:value="formValue.uartDualOpen" :options="uartDualOpenOptions"
        /></n-form-item>
        <n-form-item :label="uartPortLabel" path="uartPort"
          ><n-input-number
            v-model:value="formValue.uartPort"
            :min="1024"
            :max="65535"
            placeholder="1024~65535"
        /></n-form-item>
        <n-form-item v-if="isOpenDualOpen" label="对端接收端口" path="uartPortB"
          ><n-input-number
            v-model:value="formValue.uartPortB"
            :min="1024"
            :max="65535"
            placeholder="1024~65535"
        /></n-form-item>
        <n-form-item style="margin-left: 100px"
          ><n-button color="#E0531f" @click="handleSubmit">提交</n-button></n-form-item
        >
      </n-form>
    </n-card>
  </div></template
>
<script lang="ts" setup>
  import { computed, ref, watch } from 'vue';
  import {
    uartModeOptions,
    uartBaudrateOptions,
    uartDualOpenOptions,
    uartSbusOptions,
    uartSbusIntervalOptions,
  } from './serial';
  import type { FormInst, FormRules, FormItemRule } from 'naive-ui';
  import { isIp } from '@/utils/is';
  import { useMessage } from 'naive-ui';

  const message = useMessage();

  const props = defineProps({
    title: {
      type: String,
      required: true,
    },
    uartBaudrate: {
      type: Number,
      required: true,
    },
    uartIp: {
      type: String,
      required: true,
    },
    uartMode: {
      validator(value: number, props) {
        // The value must match one of these strings
        return [1, 2, 3].includes(value);
      },
      required: true,
    },
    uartPort: {
      type: Number,
      required: true,
    },
    uartPortB: {
      type: Number,
      required: true,
    },
    isHasSbus: {
      type: Boolean,
      required: true,
    },
    uartSbus: {
      type: Boolean,
      required: false,
      default: false,
    },
    uartSbusInterval: {
      type: Number,
      required: false,
      default: 7,
    },
    submitConfig: {
      type: Function,
      default: () => {},
    },
  });

  const formRef = ref<FormInst | null>(null);
  const formValue = ref({
    uartMode: 1,
    uartBaudrate: 115200,
    uartIp: '',
    uartPort: 1024,
    uartPortB: 1024,
    uartDualOpen: 0,
    uartSbus: 0,
    uartSbusInterval: 7,
  });
  const formRles: FormRules = {
    uartIp: [
      {
        validator(rule: FormItemRule, value: string) {
          if (!isIp(value)) {
            return new Error('不是合法ip');
          }
          return true;
        },
        trigger: ['input', 'blur'],
      },
    ],
    uartPort: [
      {
        validator(rule: FormItemRule, value: number) {
          if (value === null || value === undefined) {
            return new Error('请输入端口号');
          }
          if (value < 1024 || value > 65535) {
            return new Error('请输入合法的端口号');
          }
          return true;
        },
        trigger: ['input', 'blur'],
      },
    ],
    uartPortB: [
      {
        validator(rule: FormItemRule, value: number) {
          if (value === null || value === undefined) {
            return new Error('请输入端口号');
          }
          if (value < 1024 || value > 65535) {
            return new Error('请输入合法的端口号');
          }
          return true;
        },
        trigger: ['input', 'blur'],
      },
    ],
  };

  const isOpenDualOpenControl = computed(() => (formValue.value.uartMode !== 1 ? false : true));
  const isOpenDualOpen = computed(() =>
    formValue.value.uartMode !== 1 ? false : formValue.value.uartDualOpen === 0 ? false : true
  );
  const isUartIp = computed(() => (formValue.value.uartMode === 2 ? false : true));
  const uartPortLabel = computed(() =>
    formValue.value.uartMode !== 1
      ? '端口'
      : formValue.value.uartDualOpen === 0
      ? '端口'
      : '本地接收端口'
  );
  const isOpenSbus = computed(() =>
    formValue.value.uartMode === 1 && props.isHasSbus ? true : false
  );

  function handleSubmit() {
    formRef.value?.validate((errors) => {
      if (!errors) {
        const config = {
          uartMode: formValue.value.uartMode,
          uartBaudrate: formValue.value.uartBaudrate,
          uartIp: formValue.value.uartIp,
          uartPort: formValue.value.uartPort,
          uartPortB:
            formValue.value.uartMode === 1 && formValue.value.uartDualOpen === 1
              ? formValue.value.uartPortB
              : 0,
          uartSbus:
            formValue.value.uartMode === 1 && props.isHasSbus
              ? formValue.value.uartSbus === 1
                ? true
                : false
              : false,
          uartSbusInterval: formValue.value.uartSbusInterval,
          title: props.title,
        };
        props.submitConfig(config);
      } else {
        console.log(errors);
        message.error('请检查参数是否正确！');
      }
    });
  }

  watch(
    () => props,
    (newProps) => {
      //console.log(newProps);
      Object.assign(formValue.value, {
        uartMode: newProps.uartMode,
        uartBaudrate: newProps.uartBaudrate,
        uartIp: newProps.uartIp,
        uartPort: newProps.uartPort,
        uartPortB: newProps.uartPortB,
        uartDualOpen: newProps.uartMode === 1 && newProps.uartPortB !== 0 ? 1 : 0,
        uartSbus: newProps.uartSbus === undefined ? 0 : newProps.uartSbus ? 1 : 0,
        uartSbusInterval: newProps.uartSbusInterval === undefined ? 7 : newProps.uartSbusInterval,
      });
    },
    { deep: true, immediate: true }
  );
</script>
